
<template>
  <div class="allocResource">
    <el-dialog
      title="分配资源"
      :visible.sync="allocResourceVisible"
      width="75%"
      @close="resourceCheckedtranfrom()"
      
    >
      <div
        class="resource-list"
        v-for="(cate,index) in categoryList"
        :key="'cate' + cate.categoryId"
        :class="index===0?'top-line':null"
      >
        <el-row class="table-layout" style="background: #f2f6fc; ">
          <el-checkbox
            v-model="cate.checked"
            :indeterminate="isIndeterminate(cate)"
            @change="handleCheckAllChange(cate)"
          >
            {{ cate.name }}
          </el-checkbox>
        </el-row>

        <el-row class="table-layout" >
          <el-col
            :span="8"
            v-for="resource in getResourceByCate(cate.categoryId)"
            :key="resource.resourceId"
            style="padding: 4px 0"
          >
            <el-checkbox
              v-model="resource.checked"
              @change="handleCheckChange(resource)"
            >
              {{ resource.nameZh }}
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px" align="center">
        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="handleClose()">清空</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import role from "@/api/role";
import re_category from "@/api/re_category";

export default {
  data() {
    return {
      resourceMap: {},
      categoryList: [],
      roleId: 0,
      allocResourceVisible: false,
    };
  },
  created() {
    this.getResourceList();
  },
  methods: {
    //每次点击分配资源时调用的方法
    getListAllCate() {
      re_category.listAll().then((res) => {
        res.data.forEach((item) => {
          item.checked = false;
        });
        this.categoryList = res.data;

        this.getRoleResource(this.roleId);
      });
    },

    //组件初始化数据的方法
    getResourceList() {
      role.treeResourceList().then((res) => {
        res.data.forEach((item) => {
          item.children.forEach((children) => {
            children.checked = false;
          });
          this.resourceMap[item.categoryId] = item.children;
        });
      });
    },

    //关闭资源组件时候的触发器
    resourceCheckedtranfrom() {
      for (let resource in this.resourceMap) {
        this.resourceMap[resource].forEach((item) => {
          item.checked = false;
        });
      }

      this.categoryList.forEach((item) => {
        item.checked = false;
      });
    },

    //获取resource的children
    getResourceByCate(categoryId) {
      return this.resourceMap[categoryId];
    },

    /**
     * @param roleId 角色的ID,由父组件传递过来
     */
    getRoleResource(roleId) {
      role.listResource(roleId).then((res) => {
        res.data.forEach((item) => {
          this.resourceMap[item.categoryId].forEach((children) => {
            if (item.resourceId === children.resourceId) {
              children.checked = true;
              this.setRoleResourceCate(item.categoryId);
            }
          });
        });
      });
    },

    //ui组件的显示方法
    isIndeterminate(cate) {
      let cateResources = this.getResourceByCate(cate.categoryId);
      if (cateResources == null) {
        cate.checked = false;
      }
      let resourceConut = 0;
      cateResources.forEach((item) => {
        if (true === item.checked) {
          resourceConut++;
        }
      });
      if (resourceConut === 0) {
        cate.checked = false;
        //如果没有children选中,那就不返回true和false
        return;
      }
      return !(cateResources.length === resourceConut);
    },

    //设置cate选项框的状态
    setRoleResourceCate(categoryId) {
      this.categoryList.forEach((item) => {
        if (item.categoryId === categoryId) {
          item.checked = true;
        }
      });
    },

    //cate全选的触发器
    handleCheckAllChange(cate) {
      let cateResources = this.getResourceByCate(cate.categoryId);
      cateResources.forEach((item) => {
        item.checked = cate.checked;
      });
    },

    //resource的触发器
    handleCheckChange(resource) {
      this.getResourceByCate(resource.categoryId).forEach((item) => {
        if (item.resourceId === resource.resourceId) {
          let checked = resource.checked ? true : false;
          item.checked = checked;
          this.$forceUpdate();
        }
      });
    },

    handleSave() {
      let checkedResourceIds = new Set()
      for (let resource in this.resourceMap) {
        this.resourceMap[resource].forEach((item) => {
          if(item.checked){
            checkedResourceIds.add(item.resourceId);
          }
        });
      }
      let params = new URLSearchParams();
      params.append('roleId',this.roleId);
      params.append('resourceIds',Array.from(checkedResourceIds))
      this.$confirm("是否分配资源 ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        role.allocResource(params).then(res=>{
          this.$message({
              message: '分配成功',
              type: 'success',
              duration: 1000
            });
        })
      });
    },
    handleClose(){
      this.resourceCheckedtranfrom()
      this.getRoleResource(this.roleId)
    },
    //父组件调用子组件的方法,进行数据的渲染
    singAllocResource(roleId) {
      this.roleId = roleId;
      this.allocResourceVisible = true;
      this.getListAllCate();
    },
  },
};
</script>

<style lang="scss" scoped>
.table-layout{
  padding: 15px;
  border: 1px solid #DCDFE6;
  border-top: 0px solid;
}
.top-line {
    border-top: 1px solid #DCDFE6;
  }
</style>